<template>
  <view class="box">
    <view class="box-title">
      <view class="box-title-bg">
        <image :src="artList.cover" mode="widthFix"></image>
      </view>
      <view class="box-title-intrduce">
       <view class="bix-title-intrduce1">{{artList.name}}</view>
        <view class="bix-title-intrduce2">网易云音乐——热门歌手</view>
      </view> 
    </view>
    <view class="box-body">
      <view class="box-body-title">
        <view class="box-body-text">歌手简介</view>
      </view>
      <view class="box-body-content">
        <view class="box-body-content-text">{{artList.briefDesc}}</view>
      </view>
    </view>
    <view class="box-end">
      <view class="box-end-title">
        <text>热门单曲</text>
      </view>
      <view class="box-bodys" v-for="(ii,index) in hotSong" :key="index">
        <view class="box-body-left">{{index}}</view>
        <view class="box-body-center">
          <view class="box-body-center-top">{{ii.name}}</view>
          <view class="box-body-center-bottom">{{ii.ar[0].name}}---{{ii.al.name}}</view>
        </view>
        <view class="box-body-right">
          <image src="@/static/开始.png"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        ids:1,
        artList:[],
        hotSong:[]
      }
    },
    onLoad(options){
     this.ids=options.id
     this.getAtr()
     this.getSong()
    },
    methods: {
    async getAtr(){
       let result = await uni.$http.get('/artist/detail?id='+this.ids)
       // console.log(result)
       if(result.data.code==200){
         this.artList = result.data.data.artist
       }
      },
     async getSong(){
        let result = await uni.$http.get('/artist/top/song?id='+this.ids)
        if(result.data.code==200){
          this.hotSong = result.data.songs
        }
      }
    }
  }
</script>

<style>
  .box-title{
    position:relative;
  }
.box-title-bg image{
  width:100%;
  height:290rpx;
  height:451rpx;
}
.box-title-intrduce{
  position: absolute;
  top:410rpx;
  left:66rpx;
}
.bix-title-intrduce1{
  font-size:44rpx;
  font-weight:500;
  color:#fdf9ff;
}
.bix-title-intrduce2{
  font-size: 30rpx;
  font-weight:400;
  color:#fdf9ff;
  margin-top:23rpx;
}
.box-body-text{
  font-size:36rpx;
  font-weight:666;
  margin: 23rpx 18rpx;
}
.box-body-content-text{
  margin-left: 18rpx;
  color:#827d81;
}
.box-end{
  margin:32rpx 20rpx;
}
.box-end-title text{
 font-size:36rpx;
 font-weight:666;
}
.box-bodys{
  display:flex;
  height:156rpx;
  justify-content: space-between;
  border-bottom: 1rpx solid #d9d2d8;
}
.box-body-center{
  margin-top:24rpx;
}
.box-body-right image{
  width:66rpx;
  height:66rpx;
  margin-top:36rpx;
}
.box-body-left{
  align-self: center;
}
.box-body-center-top{
  width:500rpx;
  /* background: pink; */
  text-align:center;
  font-size:36rpx;
  font-weight:600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow:hidden;
  /* margin-bottom:12rpx; */
}
.box-body-center-bottom{
  margin-top:23rpx;
  text-align:center;
  color:#aca8ab;
}
</style>
